<template>
  <!-- 订单评审  -->
  <div class="OrderReview">
    <div class="incolumn_countr">
      <div class="search-box">
        <hy-search
          ref="query"
          :searchTitle="searchTitle"
          v-model="searcher"
          :col="6"
          @search="search(1)"
        ></hy-search>
      </div>
    </div>
    <div class="table-box">
      <template>
        <el-table
          :data="tableData"
          style="width:100%"
          stripe
          :height="autoHeightTable "
          show-overflow-tooltip
        >
          <el-table-column prop="xuhao" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="saleorderno" label="订单编号" align="center"></el-table-column>
          <el-table-column prop="kind" label="产品种类" align="center"></el-table-column>
          <el-table-column prop="BOM" label="BOM单号" align="center"></el-table-column>
          <el-table-column prop="xiadandate" label="下单时间" align="center"></el-table-column>
          <el-table-column prop="states" label="状态" align="center"></el-table-column>

          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" v-show="scope.row.states == '待评审'" @click="OrderAssess(scope.row)">评审</el-button>

              <el-button type="warning" size="mini" v-show="scope.row.states == '生产中'" @click="OrderJg(scope.row)">技改</el-button>
             

  
              <el-button type="primary" size="mini" @click="OrderDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </template>

    <!-- 订单评审 -->
    <el-dialog
      title="订单评审"
      :visible.sync="dialogVisible"
      width="700px"
      height="500px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="color_box"></div>
      <div class="title-top">
        <span class="span_right">
          下单时间
          <el-input style="width:150px" v-model="xiadandate"></el-input>
        </span>
        <span class="span_bianhao">
          订单编号
          <el-input style="width:150px" v-model="orderno"></el-input>
        </span>
      </div>

      <div class="tt" v-for="(item,index) in datas" :key="index">
        <div class="el-form-top">
          <el-form ref="form" :model="item" :inline="true">
            <el-form-item label="产品名称">
              <el-input v-model="item.productname" style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="item.productype" style="width:90px"></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="item.guige" style="width:90px"></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="item.number" style="width:90px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="el-table">
          <el-table :data="item.rawlist" height="200">
            <el-table-column align="center" type="index" label="序号" prop="xuhao"></el-table-column>
            <el-table-column align="center" label=" 原料名称">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.rawname"
                  value-key="no"
                  @change="yuanliaoname(index,scope)"
                >
                  <el-option
                    v-for="items in options"
                    :key="items.no"
                    :label="items.name"
                    :value="items"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column align="center" label="原料料号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.rawno"></el-input>
              </template>
            </el-table-column>

            <el-table-column align="center" label="原料数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="领料率">
              <template slot-scope="scope">
                <el-input v-model="scope.row.lingliaolv"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-show="scope.$index == 0"
                  size="mini"
                  :type="aaa"
                  @click="caozuo(scope,index)"
                >新增</el-button>
                <el-button
                  v-show="scope.$index != 0"
                  size="mini"
                  :type="bbb"
                  @click="caozuo(scope,index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="footer">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="BOM">生成BOM单</el-button>
          <el-button size="medium" type="info" @click="dialogVisible=false">取 消</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- BOM单 -->
    <el-dialog
      title="BOM单"
      :visible.sync="dialogVisibles"
      width="700px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="color_box"></div>
      <div class="div_xiadan">
        <span>
          下单时间
          <el-input style="width:120px" v-model="createon"></el-input>
        </span>
        <span class="span_dingdan">
          订单编号
          <el-input style="width:120px" v-model="orderno"></el-input>
        </span>
      </div>
      <div class="title">
        <span>产品信息</span>
      </div>
      <el-table :data="tableDataes">
        <el-table-column label="序号" type="index" prop="xuhao"></el-table-column>

        <el-table-column prop="productname" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="productype" label="产品类型" align="center"></el-table-column>

        <el-table-column prop="need" label="需求量" align="center"></el-table-column>
      </el-table>
      <div class="title">
        <span>物料清单</span>
      </div>
      <el-table :data="tableDataess">
        <el-table-column label="序号" type="index" prop="xuhao"></el-table-column>

        <el-table-column prop="rawname" label="物料名称" align="center"></el-table-column>
        <el-table-column prop="rawtype" label="物料类型" align="center"></el-table-column>
        <el-table-column prop="guige" label="物料规格" align="center"></el-table-column>
        <el-table-column prop="pinking" label="领料数量" align="center"></el-table-column>
      </el-table>

      <div class="footer">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="queren">确认</el-button>
          <el-button size="medium" type="info" @click="dialogVisibles=false">取消</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- 技改 -->
    <el-dialog
      title="技改会签"
      :visible.sync="dialogVisibless"
      width="350px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="color_box"></div>
      <div class="main">
        <el-form ref="form" :model="form_jg">
          <el-form-item>
            <el-checkbox-group v-model="form_jg.type">
              <el-checkbox label="技术部" name="type"></el-checkbox>
              <el-checkbox label="生产部" name="type"></el-checkbox>
              <el-checkbox label="采购部" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="form_jg.types">
              <el-checkbox label="技术部" name="types"></el-checkbox>
              <el-checkbox label="生产部" name="types"></el-checkbox>
              <el-checkbox label="采购部" name="types"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer_1">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="dialogVisibless=false">确认</el-button>
          <el-button size="medium" type="info" @click="dialogVisibless=false">取消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      total: 1,
      current: 1,
      pagesize: 11,
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibless: false,
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入订单编号",
          prop: "customProductName"
        },

        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [],
  
      tableDatas: [
        {
          xuhao: "1",
          rawno: "",
          rawname: "",
          lingliaolv: "",
          number: ""
        }
      ],

      options: [],
      value: "",

      tableDataes: [],
      tableDataess: [],
      form_jg: {
        type: [],
        types: []
      },

      aaa: "primary",
      bbb: "info",

      type: "",
      model: "",
      number: "",
      xiadandate: "",
      orderno: "",
      createon: "",
      datas: []
    };
  },
  created() {
    this.empno = JSON.parse(localStorage.getItem("empno"));
    this.getData(0);
    this.getDatas();
    this.getlist1();
  },
  methods: {
    //列表页数据
    getData(page) {
      var obj = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : null,
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      console.log(obj);
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductManagement.asmx/List_Product?index=3&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        for (var i = 0; i < list.length; i++) {
          var ddd = new Date(parseInt(list[i].xiadandate.substr(6, 13)));
          var y = ddd.getFullYear();
          var m = ddd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = ddd.getDate();
          d = d < 10 ? "0" + d : d;

          list[i].xiadandate = y + "-" + m + "-" + d;
          list[i].xuhao = 1 + i + 11 * page;
        }
        this.tableData = [];
        this.tableData = list;
      });
    },
    getDatas() {
      var obj = {
        pn: 0,
        PerPageSize: 1000
      };
      console.log(obj);
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductManagement.asmx/List_Product?index=3&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.total = list.length;
      });
    },
    //筛选
    search() {
      this.getData(0);

      var obj = {
        start: "",
        end: "",
        pn: 0,
        PerPageSize: 10000,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : null,
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductManagement.asmx/Count_Product?index=3&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var lists = JSON.parse(datas.int.__text);
        console.log(lists);
        this.total = lists;
      });
    },
    //原料名称下拉选
    getlist1() {
      axios("/apis/ProductManagement.asmx/Get?index=5&jsondata=").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas);
          var list = JSON.parse(datas.string.__text);
          console.log(list);
          this.options = list;
        }
      );
    },
    yuanliaoname(index, e) {
      console.log(e, index);
      this.datas[index].rawlist[e.$index].rawno = e.row.rawname.no;
    },

    //评审
    OrderAssess(obj) {
      this.dialogVisible = true;
      this.objs = obj.saleorderno;
      axios(
        "/apis/ProductManagement.asmx/Det_Product?index=30&jsondata=" +
          this.objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.datas = list;
        this.xiadandate = obj.xiadandate;
        this.orderno = obj.saleorderno;
        // for (var i = 0; i < list.length; i++) {
        //   this.form.productname = list[i].productname;
        //   this.form.productype = list[i].productype;
        //   this.form.number = list[i].number;
        //   this.form.guige = list[i].guige;
        // }
      });
    },
    //生成BOM单
    BOM() {
      this.dialogVisibles = true;
      var rawlists = [];
      var arrs = [];

      for (var i = 0; i < this.datas.length; i++) {
        for (var j = 0; j < this.datas[i].rawlist.length; j++) {
          var obj1 = {
            rawname: this.datas[i].rawlist[j].rawname.name,
            rawno: this.datas[i].rawlist[j].rawno,
            number: this.datas[i].rawlist[j].number,
            lingliaolv: this.datas[i].rawlist[j].lingliaolv
          };
          arrs.push(obj1)
        }
        var obj = {
          productname: this.datas[i].productname,
          productype: this.datas[i].productype,
          guige: this.datas[i].guige,
          number: this.datas[i].number,
          rawlist: arrs
        };
        rawlists.push(obj);
      }
      console.log(rawlists);

      var objd = {
        orderno: this.orderno,

        productlist: rawlists
      };
      var objsd = JSON.stringify(objd);
      axios(
        "/apis/ProductManagement.asmx/Save_Product?index=3&jsondata=" + objsd
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("保存成功");
        } else {
          this.$message.error(datas.string.__text);
        }
      });
      // BOM单详情
      axios(
        "/apis/ProductManagement.asmx/Det_Product?index=31&jsondata=" +
          this.orderno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.orderno = list.mes.orderno;
        var ddd = new Date(parseInt(list.mes.createon.substr(6, 13)));
        var y = ddd.getFullYear();
        var m = ddd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = ddd.getDate();
        d = d < 10 ? "0" + d : d;
        list.mes.createon = y + "-" + m + "-" + d;
        this.createon = list.mes.createon;
        this.tableDataes = list.productlist;
        this.tableDataess = list.rawlist;
      });
    },
    queren() {
      this.dialogVisibles = false;
      this.dialogVisible = false;
    },
    //详情
    OrderDetail(obj) {
      var id = "";
      this.$router.push({
        path: "./OrderDetail",
        query: { id: obj.saleorderno, No: obj.saleorderno, Xd: obj.xiadandate }
      });
    },
    //技改
    OrderJg() {
      this.dialogVisibless = true;
    },
    // 订单评审第一块新增、删除
    caozuo(e, index) {
      console.log(e);
      if (e.$index == 0) {
        var list = {
          xuhao: "1",
          rawno: "",
          rawname: "",
          lingliaolv: "",
          number: ""
        };
        this.datas[index].rawlist.push(list);
      } else {
        this.datas[index].rawlist.splice(e.$index, 1);
      }
    },

    // 分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.incolumn_countr {
  width: 97%;
}

.table-box {
  width: 98%;
  margin-left: 15px;
}
.el-pagination {
  margin-top: 15px;
  text-align: center;
}

.title {
  width: 98%;
  line-height: 20px;
  height: 30px;
  border-bottom: 1px solid $bordercolor;
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-top: 10px;
}

.span_right {
  margin-left: 5px;
  font-size: 14px;
  font-weight: 400;
}
.el-form-top {
  margin-top: 10px;
}

.footer {
  margin-left: 36%;
  margin-top: 10px;
}
.footer_1 {
  margin-left: 25%;
  margin-top: 10px;
}
.title_1 {
  width: 98%;
  line-height: 50px;
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  text-align: center;

  color: #515a61;
  font-size: 16px;
}
.div_xiadan {
  height: 50px;
  // border-bottom: 1px solid $bordercolor;
}
.span_dingdan {
  margin-left: 40px;
}
.title-top {
  width: 98%;
  line-height: 20px;
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}
.span_bianhao {
  margin-left: 15px;
  font-size: 14px;
  font-weight: 400;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.main {
  width: 98%;
  height: 90%;
  border-top: 1px solid $bordercolor;
  border-bottom: 1px solid $bordercolor;
}
</style>